<template>
  <div>
    <ul class="container">
      <li v-for="(item, i) in list" :key="i" @click="toDetail(item.userId)">
        <img v-if="item.showImg==null" :src="item.wxUrl">
        <img v-else :src="item.showImg">
        <div>
          <ul class="list">
            <li class="list-detail">
              <span class="work">{{item.wxName}}</span>
              <span class="city">{{item.province}}/{{item.city}}</span>
            </li>
            <li class="list-group">
              <span>{{item.age | age}}</span>
              <span>{{item.height | height}}</span>
              <span>{{item.education | education}}</span>
            </li>
            <li class="list-attest">
              <span v-for="(items, index) in item.attest" :key="index">{{items}}</span>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      myphone:''
    };
  },
  filters: {
    height(val) {
      if (val == null) return "未知";
      else return val;
    },
    age(val) {
      if (val == null) return "未知";
      else return val + "岁";
    },
    education(val) {
      if (val == null) return "未知";
      else return val;
    }
  },
  created() {
    var myopenId = location.href;
    myopenId = myopenId.split("?")[1].split("=")[1].split("#")[0];
    // location.href  "o2J2mvx53C2i3hBOikkNPW9nHlZ4"

    // var myopenId = "o2J2mvx53C2i3hBOikkNPW9nHlZ4";
    localStorage.setItem("openId", myopenId);
      localStorage.setItem("openId", myopenId);
    // console.log(myopenId)
    this.$http
      .get("/app/login/autoLogin?openId="+myopenId)
      .then(res => {
        this.myphone = res.data.phone;
        if (res.data.wxSex === "男") this.getList("女");
        else this.getList("男");
      });
  },
  methods: {
    toDetail: function(e) {
      if(this.myphone == ''||this.myphone == null) this.$dialog.confirm({message: '为确保更好体验 请先绑定手机号'}).then(() => {this.$router.push({ path: "/complete"});}).catch(() => {});
      else this.$router.push({ path: "/listDetail", query: { userId: e } });
    },
    // 获取用户列表
    getList: function(sex) {
      this.$http
        .get("/app/index/listUserInfo?pageSize=100&sex="+sex)
        .then(res => {
          this.list = res.data.list;
        });
    }
  }
};
</script>

<style scoped>
.container > li {
  display: flex;
  margin-bottom: 18px;
  padding: 12px;
  background: #f3f3f3;
}

.container > li > img {
  border-radius: 4px;
  width: 100px;
  height: 100px;
}

.container > li > div {
  font-size: 14px;
  padding-left: 10px;
}

.container .list-detail {
  max-width: 190px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.container .list-detail .work {
  color: #222;
  font-size: 16px;
  margin-right: 10px;
}

.container .list-detail .city {
  font-size: 13px;
  color: #777;
}

.container .list-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.container .list-group span {
  padding: 1px 4px;
  background: #dfdfdf;
  border-radius: 16px;
  color: #555;
  font-weight: 300;
  margin-right: 4px;
}

.container .list li {
  margin-bottom: 10px;
}

.container .list-attest {
  color: #666;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
}

.container .list-attest span::after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 1px;
  background: #666;
  margin: 0 4px;
}

.container .list-attest span:last-child::after {
  display: none;
}
.container{margin-bottom: 50px;margin-top: 10px;}
</style>
